Este es un proyecto de conversión de React jsx a js muy simple que estamos usando para integrar el código React en un sitio web heredado .aspx. Eventualmente, el sitio web de who se escribirá en React.
Cada vez que se usa la abreviatura Fragment <>, el compilador devuelve un SyntaxError: Unexpected token.
Muestra.js
import React from "react"; function Sample() { return ( <> Hello world </> ); } SyntaxError: src/Sample.js: Unexpected token (6:9) 4 | function Sample() { 5 | return ( > 6 | <> | ^ 7 | Hello world 8 | </> 9 | );El proyecto usa Babel 7.17.7 y babel-preset-react-app 3.1.2, lo que creo que significa que los ajustes preestablecidos están configurados para reconocer la abreviatura <>.
Este es el contenido del archivo package.json.
{ "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "jsx.bat" }, "keywords": [], "author": "Russ Petersen (http://www.petesoft.com/)", "license": "ISC", "dependencies": { }, "devDependencies": { "@babel/core": "^7.17.7", "babel-cli": "^6.26.0", "babel-preset-react-app": "^3.1.2", "react": "^17.0.2" } }Estoy invocando el proceso de compilación con esta línea de comando.
jsx.bat
npx babel --watch src --out-dir . --presets react-app/prodSí, podemos usar <React.Fragment> pero <> tiene más estilo.
Cualquier ayuda que pueda dar es apreciada.
Encontré la respuesta en "Error de sintaxis no detectado: no se puede usar la declaración de importación fuera de un módulo" después de la compilación de babel
Se cambió la línea de comando (jsx.bat) a
npx babel --watch src --out-dir . --presets @babel/preset-reacty
package.json devDependencias de
"devDependencies": { "react": "^17.0.2", "@babel/cli": "^7.17.6", "@babel/core": "^7.17.7", "@babel/preset-react": "^7.16.7" }